<template>
  <div class="home">
      <short-cut></short-cut>
      <nav-header></nav-header>
      <div class="banner wrapper">
        <ul>
              <li><a href="#"><img src="../../uploads/banner_1.png" alt="banner_1.png"/></a></li>
        </ul>
        <div class="aside">
          <ul>
            <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
            <li><a href="#">美食<span>面点 干果</span></a></li>
            <li><a href="#">餐厨<span>数码产品</span></a></li>
            <li><a href="#">电器<span>床品 四件套 被枕</span></a></li>
            <li><a href="#">居家<span>奶粉 玩具 辅食</span></a></li>
            <li><a href="#">洗护<span>洗发 洗护 美妆</span></a></li>
            <li><a href="#">孕婴<span>奶粉 玩具</span></a></li>
            <li><a href="#">服饰<span>女装 男装</span></a></li>
            <li><a href="#">杂货<span>户外 图书</span></a></li>
            <li><a href="#">品牌<span>品牌制造</span></a></li>
          </ul>
        </div>
      </div>
      <copy-right></copy-right>
  </div>
</template>

<script>
import shortCut from "@/components/common/ShortCut";
import navHeader from "@/components/common/NavHeader";
import copyRight from "@/components/common/CopyRight";

export default {
  name: "HomeView",
  components:{
    shortCut,
    navHeader,
    copyRight
  }
}
</script>

<style lang="less" scoped>
.home{
  .banner{
    height: 500px;
    background-color: #f5f5f5;
    position: relative;
    .aside{
      position: absolute;
      left: 0;
      top: 0;
      width: 251px;
      height: 500px;
      background-color: #000000;
      opacity: 0.8;
      li{
        height: 50px;
        line-height: 50px;
        a{
          display: block;
          height: 50px;
          padding-left: 36px;
          padding-right: 19px;
          color: #ffffff;
          position: relative;
          &:hover{
            background-color: #27ba9b;
          }
          &:after{
            position: absolute;
            right: 19px;
            content: ">";
          }
          span{
            padding-left: 15px;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>